<template>
  <el-card class="admin-responser">
    <tag-content-header>
      <template #title>
        <span>责任人管理</span>
      </template>
    </tag-content-header>
    <el-form inline :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px">
      <el-form-item prop="queryType" label="导出类型">
        <el-select v-model="editForm.queryType">
          <el-option label="---" value=""></el-option>
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="idList" label="导出项">
        <el-select v-model="editForm.idList" multiple filterable class="muti-select">
          <el-option label="---" value=""></el-option>
          <template v-if="editForm.queryType">
            <template v-if="editForm.queryType % 2 === 0">
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="$name(item)"
                :value="item.userId"
              ></el-option>
            </template>
            <template v-else>
              <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptNm" :value="item.deptId">
                <el-tooltip effect="dark" :content="item.deptPath" placement="top">
                  <span>
                    {{ item.deptNm }}
                  </span>
                </el-tooltip>
              </el-option>
            </template>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="download">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$refs.responserDrawer.showDrawer()">批量导入</el-button>
      </el-form-item>
    </el-form>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #responserNm="{ scope }">
        {{ $name(scope.row, 'responserNnm', 'responserNm') }}
      </template>
      <template #amartDeveloperNm="{ scope }">
        {{ $name(scope.row, 'amartDeveloperNnm', 'amartDeveloperNm') }}
      </template>
      <template #bmartDeveloperNm="{ scope }">
        {{ $name(scope.row, 'bmartDeveloperNnm', 'bmartDeveloperNm') }}
      </template>
    </tag-table>
    <responser-drawer ref="responserDrawer"></responser-drawer>
  </el-card>
</template>

<script>
import responserDrawer from './responser-bath'
export default {
  components: {
    responserDrawer
  },
  data() {
    return {
      typeList: [
        { label: '责任人团队', value: 1 },
        { label: '责任人', value: 2 },
        { label: '接口层开发团队', value: 3 },
        { label: '接口层开发人', value: 4 },
        { label: '集市层开发团队', value: 5 },
        { label: '集市层开发人', value: 6 }
      ],
      deptList: [],
      userList: [],
      editForm: {
        queryType: '',
        idList: []
      },
      editFormRules: {
        queryType: [{ required: true, message: '导出类型不能为空', trigger: 'change' }],
        idList: [{ required: true, message: '导出项不能为空', trigger: 'change' }]
      },
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm'
        },
        {
          show: true,
          label: '责任团队',
          prop: 'respTeamNm',
          align: 'center'
        },
        {
          show: true,
          label: '责任人',
          prop: 'responserNm',
          align: 'center'
        },
        {
          show: true,
          label: '接口层开发团队',
          prop: 'amartDevTeamNm',
          align: 'center'
        },
        {
          show: true,
          label: '接口层开发人',
          prop: 'amartDeveloperNm',
          align: 'center'
        },
        {
          show: true,
          label: '集市层开发团队',
          prop: 'bmartDevTeamNm',
          align: 'center'
        },
        {
          show: true,
          label: '集市层开发人',
          prop: 'bmartDeveloperNm',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      prop: {
        key: '',
        label: ''
      }
    }
  },
  created() {
    this.getDeptList()
    this.getUserList()
  },
  watch: {
    'editForm.queryType'() {
      this.editForm.idList = []
    }
  },
  methods: {
    getDeptList() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authDeptMgr/all'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.deptList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getUserList() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUserMgr/users'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.userList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    search() {
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      }
      this.getList()
    },
    getList() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.params.queryParams.queryType = this.editForm.queryType
          this.params.queryParams.idList = this.editForm.idList
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('auth/admin/tagPrincipalList'),
            method: 'get',
            params: this.$ajax.setParams(this.params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.dataList = data.data.records
              this.totalSize = data.data.totalSize
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    download() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$ajax.setUrl('auth/admin/downloadPrincipal'),
            method: 'post',
            data: this.$ajax.setData({
              queryType: this.editForm.queryType,
              idList: this.editForm.idList
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$dlFile(data.data)
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.admin-responser {
  .muti-select {
    .el-input {
      width: 300px;
    }
  }
}
</style>
